{% extends 'base.html' %}


{% block card_body %}
<div class="layui-row">
    <div class="layui-row layui-col-md6">
        <ul class="layui-row layui-col-space10">
            <li class="layui-row layui-col-md3">
                <a href="{{ url_for('main.sysinfo') }}" style="text-align: center">
                    <div><i class="layui-icon layui-icon-console" style="font-size: 50px"></i></div>
                    <div><cite>系统管理</cite></div>
                </a>
            </li>
            <li class="layui-row layui-col-md3">
                <a href="{{ url_for('main.searchbook') }}" style="text-align: center">
                    <div><i class="layui-icon layui-icon-template-1" style="font-size: 50px"></i></div>
                    <div><cite>图书管理</cite></div>
                </a>
            </li>
            <li class="layui-row layui-col-md3">
                <a href="{{ url_for('main.readerinfo') }}" style="text-align: center">
                    <div><i class="layui-icon layui-icon-user" style="font-size: 50px"></i></div>
                    <div><cite>读者管理</cite></div>
                </a>
            </li>
            <li class="layui-row layui-col-md3">
                <a href="{{ url_for('main.borrowbook') }}" style="text-align: center">
                    <div><i class="layui-icon layui-icon-form" style="font-size: 50px"></i></div>
                    <div><cite>图书借还</cite></div>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-row layui-col-md4">
        <ul class="layui-row layui-col-space10">
            <li class="layui-row layui-col-md5" style="background: #333;margin-right: 10px">
                <a href="{{ url_for('main.borrowbook') }}" style="text-align: center">
                    <h2 style="margin-bottom: 5px">借书申请</h2>
                    <div><cite id="borrowreqnum" style="color: #1b6d85;font-size: 25px"></cite></div>
                </a>
            </li>
            <li class="layui-row layui-col-md5" style="background: #333;margin-left: 10px">
                <a href="{{ url_for('main.returnbook') }}" style="text-align: center">
                    <h2 style="margin-bottom: 5px">还书申请</h2>
                    <div><cite id="returnreqnum" style="color: #1b6d85;font-size: 25px"></cite></div>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-row layui-col-md12" style="margin-top: 30px">
        <div class="layui-row layui-col-md5" >
            <div id="line" style="width: 100%;height:360px;"></div>
            <div style="margin-top: 30px;text-align: center">
                <p>借阅量/读者变化曲线</p>
            </div>
        </div>
        <div class="layui-row layui-col-md5 layui-col-md-offset1">
            <div id="pie" style="width: 100%;height:360px;"></div>
            <div style="margin-top: 30px;text-align: center">
                <p>库存图书分类占比</p>
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block script %}

<script src="../static/layui/layui.js"></script>
<script>
layui.use(['layer'], function(){
    var layer = layui.layer
    {% for message in get_flashed_messages() %}
        layer.msg('{{ message }}');
    {% endfor %}
});
</script>

<script src="../static/echart/echarts.min.js"></script>
<script src="../static/jquery/jquery.min.js"></script>

<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('line'));
    var option1;

    option1 = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['借阅图书', '借阅读者'],
            textStyle: { // 设置图例文字颜色
                color: '#fff'}
        },
        grid: {
            left: '10%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {},
                textStyle: { // 设置图例文字颜色
                    color: '#fff'}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            textStyle: { // 设置图例文字颜色
                color: '#fff'}
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '借阅图书',
            type: 'line',
            data: [],
            color: 'DeepSkyBlue'
        },
        {
            name: '借阅读者',
            type: 'line',
            data: [],
            color: 'DarkTurquoise'
        }]
    };

    myChart1.setOption(option1);

    $.get('{{ url_for('main.bookstatics_api1') }}').done(function (data) {
        // 填入数据
        console.log(data)
        option1.series[0].data = data.book
        option1.series[1].data = data.reader
        myChart1.setOption(option1);
    });
</script>

<script type="text/javascript">
    var myChart2 = echarts.init(document.getElementById('pie'));
    var option2;

    option2 = {
        legend: {
            top: 'bottom',
            textStyle: { // 设置图例文字颜色
                color: '#fff'}
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true},
                textStyle: { // 设置图例文字颜色
                    color: '#fff'}
            },
            textStyle: { // 设置图例文字颜色
                color: '#fff'}
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: [50, 140],
                center: ['50%', '45%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [],
                textStyle: { // 设置图例文字颜色
                    color: '#fff'}
            }
        ]
    };

    myChart2.setOption(option2);
    $.get('{{ url_for('main.bookstatics_api2') }}').done(function (data) {
        // 填入数据
        console.log(data.data)
        myChart2.setOption({
            series: [{
                data: data.data
            }]
        });
    });

</script>

<!--- 显示借阅/归还消息数 -->
<script>
    $.get('{{ url_for('main.indextips_api') }}', function(data){
        $("#borrowreqnum").text(data.breq)
        $("#returnreqnum").text(data.rreq)
    })
</script>

{% endblock %}